<!--
 * @Description: 内容导航组件
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-03-16 09:01:37
 * @LastEditors: zhou
 * @LastEditTime: 2022-08-26 18:33:03
-->

<template>
    <div class="container" :style="{gridTemplateColumns: `repeat(${list.length || 4}, 1fr)`}">
        <div
            v-for="item in list"
            :key="item.id"
            :class="['btn flexrcc', item.id==cut_id? 'active' : '']"
            @click="tabComp(item.id)"
        >
            {{ item.label }}
        </div>
    </div>
</template>

<script>
export default {
    name: "ProNav",
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            cut_id: 1,
        };
    },
    computed: {},
    methods: {
        tabComp(id) {
            this.cut_id = id
            this.$emit('change', id)
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    display: grid;
    gap: 0 vw(10);
    margin-bottom: vh(20);
    .btn {
        background: #002440; // 16171F
        border: 1px solid rgba(41, 173, 249, 0.4);
        margin-right: vw(10);
        color: #fff;
        height: vh(36);
        cursor: pointer;
        &.active {
            background: linear-gradient(180deg, rgba(22, 159, 196, 0) 0%, rgba(22, 159, 196, 0.8) 100%);
            border: 1px solid rgba(22, 159, 196, 0.6);
        }
    }

}
</style>
